<template>
  <div class="personInfor-page">
    <div class="personInfor-title">个人住房信息数据挖掘分析</div>
    <div class="personInfor-content">
      <!-- 个人拥有住房增长趋势 -->
      <div class="personInfor-gird">
        <img class="personInfor-gird-title" src="@/assets/img/personInfor/title1.png" alt="" />
        <div class="add-trend person-house-growth-trend">
          <div class="add-trend-l-content-top">
            <div>
              当前个人拥有住房：<span>{{ personHouseData.personHouseStatisticsDataTopInfo?.ownSum || 0 }}</span
              >套 / <span>{{ personHouseData.personHouseStatisticsDataTopInfo?.ownArea || 0 }}m²</span> &nbsp;空置率：<span
                >{{ personHouseData.personHouseStatisticsDataTopInfo?.vacancyRate || 0 }}%</span
              >&nbsp;居住率：<span>{{ personHouseData.personHouseStatisticsDataTopInfo?.unVacancyRate || 0 }}%</span>
            </div>
          </div>
          <el-select
            class="person-house-growth-trend-select"
            v-model="personHouseData.personHouseStatisticsSelectModel"
            size="small"
            @change="changePersonHouseGrowthTrendSelect"
          >
            <el-option
              v-for="item in personHouseData.personHouseStatisticsSelectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="custom-select-option"
            />
          </el-select>
          <bar-line
            v-if="personHouseData?.personHouseStatisticsData?.legendData?.length > 0"
            :barLineData="personHouseData.personHouseStatisticsData"
            ref="personHouseStatisticsDomRef"
            class="h220"
            :isExistXAxisTimeType="false"
            @click="fullSc('barLine', personHouseData.personHouseStatisticsData)"
          ></bar-line>
        </div>
      </div>
      <!-- map -->
      <div class="personInfor-gird" style="position: relative; background-color: rgba(0, 0, 0, 0)">
        <mapBox
          v-if="Object.keys(personHouseData.personHouseMiddleData).length > 0"
          :housingSupplyStatsData="personHouseData.personHouseMiddleData"
          :mapInd="personHouseData.mapInd"
          :cityName="personHouseData.cityName"
          @mapNameChange="mapNameChange"
          style="height: 100%; width: 100%"
        ></mapBox>
        <div class="map-address">辽宁省{{ personHouseData.cityName == "" ? "" : "-" + personHouseData.cityName }}</div>
        <!--        <div class="time-list-box">
          <filtrate-year-range @getYearRange="getYearRange" />
        </div>-->
      </div>
      <!-- 个人住房供应与交易趋势 -->
      <div class="personInfor-gird">
        <img class="personInfor-gird-title" src="@/assets/img/personInfor/title2.png" alt="" />
        <div class="add-trend person-house-supply-trade-trend">
          <div class="person-house-supply-trade-trend-select">
            <public-change-province-city
              :cityList="personHouseData.cityList"
              :currentCity="personHouseData.cityConfig.personHouseSupplyTradeTrendCurrentCity"
              @changeCity="(event) => changeCity(event, 'personHouseSupplyTradeTrend')"
            ></public-change-province-city>
            <el-select
              class="person-house-supply-trade-trend-select-type"
              v-model="personHouseData.personHouseSupplyTradeTrendSelectAcreageModel"
              size="small"
              @change="changePersonHouseSupplyTradeTrendSelect"
            >
              <el-option
                v-for="item in personHouseData.personHousePropertyStatisticsSelectAcreageList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="custom-select-option"
              />
            </el-select>
            <el-select
              class="person-house-supply-trade-trend-select-type"
              v-model="personHouseData.personHouseSupplyTradeTrendSelectHouseTypeModel"
              size="small"
              @change="changePersonHouseSupplyTradeTrendSelect"
            >
              <el-option
                v-for="item in personHouseData.personHousePropertyStatisticsSelectHouseTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="custom-select-option"
              />
            </el-select>
          </div>
          <div class="person-house-supply-trade-trend-chart">
            <div class="add-trend-l">
              <div class="small-title">
                <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
                <span>房屋供应销售统计</span>
              </div>
              <bar-line-public
                class="h200"
                v-if="Object.keys(personHouseData.personHouseSupplyData).length > 0"
                :housingSupplyStatsData="personHouseData.personHouseSupplyData"
                @changeXAxisTimeType="changeXAxisTimeType($event, 'personHouseSupplyTradeTrendLeft')"
                @click="fullSc('barLinePublic', personHouseData.personHouseSupplyData, 'personHouseSupplyTradeTrendLeft')"
              ></bar-line-public>
            </div>
            <div class="add-trend-r">
              <div class="small-title">
                <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
                <span>房屋交易趋势 - {{ personHouseData.carouselInd == 0 ? "商品住宅" : "二手房住宅" }}</span>
              </div>
              <el-carousel indicator-position="none" autoplay :interval="3000" class="custom-carousel" @change="carouselChange">
                <el-carousel-item>
                  <bar-line-public
                    v-if="Object.keys(personHouseData.personHouseSupplyRigthData1).length > 0"
                    :housingSupplyStatsData="personHouseData.personHouseSupplyRigthData1"
                    @changeXAxisTimeType="changeXAxisTimeType($event, 'personHouseSupplyTradeTrendRight1')"
                    @click="fullSc('barLinePublic', personHouseData.personHouseSupplyRigthData1, 'personHouseSupplyTradeTrendRight1')"
                    class="h200"
                  ></bar-line-public>
                </el-carousel-item>
                <el-carousel-item>
                  <bar-line-public
                    v-if="Object.keys(personHouseData.personHouseSupplyRigthData2).length > 0"
                    :housingSupplyStatsData="personHouseData.personHouseSupplyRigthData2"
                    @changeXAxisTimeType="changeXAxisTimeType($event, 'personHouseSupplyTradeTrendRight2')"
                    @click="fullSc('barLinePublic', personHouseData.personHouseSupplyRigthData2, 'personHouseSupplyTradeTrendRight2')"
                    class="h200"
                  ></bar-line-public>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
      <!-- 个人拥有住房属性占比及趋势 -->
      <div class="personInfor-gird">
        <img class="personInfor-gird-title" src="@/assets/img/personInfor/title3.png" alt="" />
        <div class="add-trend person-house-attribute-proportion-trend">
          <div class="person-house-attribute-proportion-trend-select">
            <el-select
              class="person-house-attribute-proportion-trend-select-type"
              v-model="personHouseData.personHousePropertyStatisticsSelectTypeModel"
              size="small"
              @change="changePersonHouseAttributeProportionTrendSelect"
            >
              <el-option
                v-for="item in personHouseData.personHousePropertyStatisticsSelectTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="custom-select-option"
              />
            </el-select>
            <public-change-province-city
              :cityList="personHouseData.cityList"
              :currentCity="personHouseData.cityConfig.personHouseAttributeProportionTrendCurrentCity"
              @changeCity="(event) => changeCity(event, 'personHouseAttributeProportionTrend')"
            ></public-change-province-city>
            <el-select
              class="person-house-attribute-proportion-trend-select-type"
              v-model="personHouseData.personHousePropertyStatisticsSelectAcreageModel"
              size="small"
              @change="changePersonHouseAttributeProportionTrendSelect"
            >
              <el-option
                v-for="item in personHouseData.personHousePropertyStatisticsSelectAcreageList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="custom-select-option"
              />
            </el-select>
            <el-select
              class="person-house-attribute-proportion-trend-select-type"
              v-model="personHouseData.personHousePropertyStatisticsSelectHouseTypeModel"
              size="small"
              @change="changePersonHouseAttributeProportionTrendSelect"
            >
              <el-option
                v-for="item in personHouseData.personHousePropertyStatisticsSelectHouseTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="custom-select-option"
              />
            </el-select>
          </div>
          <bar-line
            v-if="Object.keys(personHouseData.personHousePropertyStatisticsData).length > 0"
            :barLineData="personHouseData.personHousePropertyStatisticsData"
            ref="personHousePropertyStatisticsDomRef"
            class="h220"
            style="width: 100%"
            @click="fullSc('barLine', personHouseData.personHousePropertyStatisticsData, 'personHouseAttributeProportionTrend')"
            @changeXAxisTimeType="changeXAxisTimeType($event, 'personHouseAttributeProportionTrend')"
          ></bar-line>
        </div>
      </div>
      <!-- 个人住房面积走势分析 -->
      <div class="personInfor-gird personInfor-gird-four">
        <div class="personInfor-four-top">
          <!--          <table-list
            v-if="Object.keys(personHouseData.personHouseMiddleListData).length > 0"
            :housingSupplyStatsData="personHouseData.personHouseMiddleListData"
            :mapInd="personHouseData.mapInd"
            style="width: 100%; height: 100%"
          ></table-list>-->
          <div class="top-tab">
            <h3>各地区排名</h3>
            <el-date-picker
              class="date-picker-model"
              v-model="personHouseData.regionRankingCurrentYear"
              size="small"
              :clearable="false"
              type="year"
              value-format="YYYY"
              @change="(event) => changeYearTime(event, 'regionRanking')"
            />
            <div class="map-lable">
              <div
                @click="mapLableFun(index)"
                :class="index == personHouseData.mapInd ? 'active' : ''"
                v-for="(item, index) in personHouseData.mapLable"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="main-content">
            <div class="main-content-header">
              <div class="bar-index">排名</div>
              <div class="bar-label">地市</div>
              <div class="bar">供应套数</div>
              <span class="bar-rate">同比增长率</span>
            </div>
            <div class="main-content-table">
              <div class="main-content-table-item" v-for="(item, index) of personHouseData.regionRankingList" :key="index">
                <div class="bar-index">{{ index + 1 }}</div>
                <el-tooltip :content="item.label" placement="top" popper-class="region-ranking-tooltip">
                  <div class="bar-label">{{ item.label }}</div>
                </el-tooltip>
                <div class="bar">
                  <el-tooltip :content="item.value" placement="top" popper-class="region-ranking-tooltip">
                    <div class="bar-item" :style="{ width: `${(item.value / item.total) * 100}%` }" :title="item.value">
                      {{ item.value }}
                    </div>
                  </el-tooltip>
                </div>
                <span class="bar-rate">{{ `${item.yoyPercentaage}%` }}</span>
              </div>
            </div>
          </div>
        </div>
        <!--        <div class="personInfor-four-center" @click="fullSc('bar-line-public', personHouseData.personHouseAreaData)">
          <img class="personInfor-gird-title" src="@/assets/img/personInfor/title4.png" alt="" />
          <bar-line-public
            class="h183"
            v-if="Object.keys(personHouseData.personHouseAreaData).length > 0"
            :housingSupplyStatsData="personHouseData.personHouseAreaData"
          ></bar-line-public>
        </div>-->
        <div class="personInfor-four-bottom">
          <img class="personInfor-gird-title" src="@/assets/img/personInfor/title5.png" alt="" />
          <div class="personInfor-four-bottom-title">
            <div class="personInfor-four-bottom-title-switch">
              <el-switch
                v-model="personHouseData.houseSituationStatisticsSwitch"
                inline-prompt
                style="--el-switch-on-color: #2073c9; --el-switch-off-color: #2073c9"
                active-text="且"
                inactive-text="或"
                size="small"
                @change="switchChange"
              />
            </div>
            <div class="personInfor-four-bottom-title-filtrate">
              <div v-for="(item, index) of personHouseData.houseSituationStatisticsFiltrateList">
                <el-select
                  class="type"
                  v-model="item.type"
                  placeholder="请选择"
                  size="small"
                  @change="houseSituationStatisticsFiltrateSelectTypeChange"
                >
                  <el-option
                    v-for="item in personHouseData.houseSituationStatisticsFiltrateSelectTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                    class="custom-select-option"
                  />
                </el-select>
                <el-select class="relational-operator-type" v-model="item.relationalOperatorType" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in personHouseData.houseSituationStatisticsFiltrateSelectRelationalOperatorList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    class="custom-select-option"
                  />
                </el-select>
                <el-input class="num" v-model="item.num" placeholder="请输入" size="small" maxlength="2" @input="handleInput($event, item)" />
                <el-icon class="delete-btn" v-if="index !== 0" @click="deleteHouseSituationStatisticsFiltrate(item, index)">
                  <Delete />
                </el-icon>
              </div>
              <div class="btns">
                <div
                  v-if="personHouseData.houseSituationStatisticsFiltrateList?.length !== 4"
                  class="btns-add"
                  @click="houseSituationStatisticsAddFiltrate"
                >
                  添加筛选
                </div>
                <div class="btn-submit" @click="houseSituationStatisticsInitChart">生成图表</div>
              </div>
            </div>
          </div>
          <!--          <line-paragraph
            v-if="Object.keys(personHouseData.personHouseNumberData).length > 0"
            :housingSupplyStatsData="personHouseData.personHouseNumberData"
            class="h131"
          ></line-paragraph>-->
          <single-bar
            v-if="personHouseData.personHouseNumberData?.xAxisData?.length > 0"
            ref="houseSituationStatisticsDomRef"
            :barData="personHouseData.personHouseNumberData"
            :class="personHouseNumberClass"
            @click="fullSc('singleBar', personHouseData.personHouseNumberData)"
          ></single-bar>
        </div>
      </div>
      <!-- 房屋总量变化分析 -->
      <div class="personInfor-gird">
        <img class="personInfor-gird-title" src="@/assets/img/personInfor/title6.png" alt="" />
        <public-change-province-city
          class="total-house-change-analysis-city-filtrate"
          :cityList="personHouseData.cityList"
          :currentCity="personHouseData.cityConfig.totalHouseChangeAnalysisCurrentCity"
          @changeCity="(event) => changeCity(event, 'totalHouseChangeAnalysis')"
        ></public-change-province-city>
        <bubble
          @click="fullSc('bubble', personHouseData.personHouseCommodityData)"
          v-if="Object.keys(personHouseData.personHouseCommodityData).length > 0"
          :housingSupplyStatsData="personHouseData.personHouseCommodityData"
          class="h220"
        ></bubble>
      </div>
      <!-- 个人拥有住房购房资金来源及贷款趋势 -->
      <div class="personInfor-gird">
        <img class="personInfor-gird-title" src="@/assets/img/personInfor/title7.png" alt="" />
        <div class="add-trend capital-source-loan-trend">
          <public-change-province-city
            :cityList="personHouseData.cityList"
            :currentCity="personHouseData.cityConfig.personHouseCapitalSourceLoanTrendCurrentCity"
            @changeCity="(event) => changeCity(event, 'personHouseCapitalSourceLoanTrend')"
          ></public-change-province-city>
          <div class="capital-source-loan-trend-content">
            <div class="add-trend-l">
              <div class="small-title">
                <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
                <span>个人拥有住房购房资金来源统计</span>
              </div>
              <pie-public
                v-if="Object.keys(personHouseData.personHouseFundStatisticsData).length > 0"
                ref="buyHouseCapitalSourceStatisticsDomRef"
                :housingSupplyStatsData="personHouseData.personHouseFundStatisticsData.leftEntity"
                class="h190"
                @click="fullSc('piePublic', personHouseData.personHouseFundStatisticsData.leftEntity)"
              ></pie-public>
              <el-date-picker
                class="month-picker"
                v-model="personHouseData.personHouseCapitalSourceCurrentMonth"
                type="month"
                value-format="YYYY-MM"
                :clearable="false"
                placeholder="请选择月份"
                size="small"
                @change="personHouseFundStatistics('leftChart')"
              />
            </div>
            <div class="add-trend-r">
              <div class="small-title">
                <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
                <span>新增个人住房贷款同比增长率</span>
              </div>
              <multiple-bar
                v-if="Object.keys(personHouseData.personHouseFundStatisticsData).length > 0"
                ref="loanYoyGrowthRateDomRef"
                :bar-data="personHouseData.personHouseFundStatisticsData"
                class="h180"
                @changeXAxisTimeType="changeXAxisTimeType($event, 'personHouseLoanYoyGrowthRate')"
                @click="fullSc('multipleBar', personHouseData.personHouseFundStatisticsData, 'personHouseLoanYoyGrowthRate')"
              ></multiple-bar>
            </div>
          </div>
        </div>
      </div>
      <!-- 常住人口对个人住房的影响 -->
      <div class="personInfor-gird buyer-purchase-statistics">
        <img class="personInfor-gird-title" src="@/assets/img/personInfor/title8.png" alt="" />
        <div class="buyer-purchase-statistics-select">
          <public-change-province-city
            :cityList="personHouseData.cityList"
            :currentCity="personHouseData.cityConfig.buyerPurchaseStatisticsCurrentCity"
            @changeCity="(event) => changeCity(event, 'buyerPurchaseStatistics')"
          ></public-change-province-city>
          <el-select
            class="buyer-purchase-statistics-select-type"
            v-model="personHouseData.buyerPurchaseStatisticsSelectHouseTypeModel"
            size="small"
            @change="changeBuyerPurchaseStatisticsSelectSelect"
          >
            <el-option
              v-for="item in personHouseData.buyerPurchaseStatisticsSelectHouseTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="custom-select-option"
            />
          </el-select>
          <el-select
            class="buyer-purchase-statistics-select-type"
            v-model="personHouseData.personHousePropertyStatisticsSelectAgeHomeModel"
            size="small"
            @change="changeBuyerPurchaseStatisticsSelectSelect"
          >
            <el-option
              v-for="item in personHouseData.buyerPurchaseStatisticsSelectAgeHomeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="custom-select-option"
            />
          </el-select>
        </div>
        <double-line
          v-if="personHouseData.buyerPurchaseStatisticsData?.seriesData?.length"
          ref="buyerPurchaseStatisticsDomRef"
          :line-data="personHouseData.buyerPurchaseStatisticsData"
          class="h220"
          @changeXAxisTimeType="changeXAxisTimeType($event, 'buyerPurchaseStatistics')"
          @click="fullSc('doubleLine', personHouseData.buyerPurchaseStatisticsData, 'buyerPurchaseStatistics')"
        ></double-line>
      </div>
      <!-- 点击放大 type表示是放大的图  其他根据自己组件调整-->
      <el-dialog
        v-model="personHouseData.magnifyData.dialogVisible"
        :width="personHouseData.magnifyData.dialogWidth"
        :top="personHouseData.magnifyData.dialogTop"
      >
        <component
          v-if="personHouseData.magnifyData.dialogVisible"
          ref="dialogRef"
          :is="personHouseData.magnifyData.componentName"
          :dialogData="{
            fontSizeTimes: 2,
          }"
          v-bind="{ ...personHouseData.magnifyData.props }"
          @dialogEmit="dialogEmit"
        ></component>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts">
import barLinePublic from "@/components/personInfor/barLinePublic.vue";
import lineCircle from "@/components/personInfor/lineCircle.vue";
import boxPlotPbulic from "@/components/boxPlotPbulic.vue";
import bubble from "@/components/personInfor/bubble.vue";
import piePage from "@/components/personInfor/piePage.vue";
import piePublic from "@/components/personInfor/piePublic.vue";
import pieLinePbulic from "@/components/personInfor/pieLinePbulic.vue";
import lineParagraph from "@/components/personInfor/lineParagraph.vue";
import barLine from "@/components/personInfor/barLine.vue";
import multipleBar from "@/components/personInfor/multipleBar.vue";
import singleBar from "@/components/personInfor/singleBar.vue";
import doubleLine from "@/components/personInfor/doubleLine.vue";
export default {
  components: {
    barLinePublic,
    lineCircle,
    boxPlotPbulic,
    bubble,
    piePage,
    piePublic,
    pieLinePbulic,
    lineParagraph,
    barLine,
    multipleBar,
    singleBar,
    doubleLine,
  },
};
</script>
<script setup lang="ts">
import { nextTick, onMounted, ref, computed } from "vue";
import { pxToRem } from "@/utils/index";
import mapBox from "@/components/map.vue";
import tableList from "@/components/personInfor/tableList.vue";
import {
  getPersonHouseNumber,
  getPersonHouseArea,
  getPersonHouseFundStatistics,
  getPersonHousePropertyStatistics,
  getPersonHouseStatistics,
  getPersonHouseTypeStatistics,
  getPersonHouseMiddle,
  getPersonHouseSupply,
  getPersonHousePopulation,
  getPersonHouseCommodity,
  getPersonHouseGetHousingTrend, // 新-个人拥有住房属性占比及趋势
  getPersonHouseFundLoanTrend, // 新-个人拥有住房购房资金来源及贷款趋势-左侧
  getPersonHouseFundLoanTrendRight, // 新-个人拥有住房购房资金来源及贷款趋势-右侧
  getPersonHouseGetIndividualProperty, // 新-个人拥有房屋情况统计
  getPersonHouseHomeFlowLeft, // 新-个人住房供应与交易趋势左图
  getPersonHouseHomeFlowRight, // 新-个人住房供应与交易趋势右图
  getPersonHouseLogPurchaseStats, // 新-购房人购房情况统计
  getPersonHouseTrackHousingGrowth, // 新-个人拥有住房增长趋势
} from "@/api/personInfor";
import usePersonHouseData from "@/hooks/personInfor/usePersonInfor";
import { processBoxPlotData } from "@/utils/index";
import { boxPlotParamsData, barLineParamsData } from "@/utils/chartsPbulic";
import filtrateYearRange from "@/components/public/filtrateYearRange.vue";
import publicChangeProvinceCity from "@/components/personInfor/publicChangeProvinceCity.vue";
import { ElMessage } from "element-plus";

const personHouseData = usePersonHouseData();
const personHouseStatisticsDomRef: any = ref(null); // 个人拥有住房增长趋势dom-ref
const personHousePropertyStatisticsDomRef: any = ref(null); // 个人拥有住房属性占比及趋势dom-ref
const buyHouseCapitalSourceStatisticsDomRef: any = ref(null); // 个人拥有住房购房资金来源统计dom-ref
const loanYoyGrowthRateDomRef: any = ref(null); // 新增个人住房贷款同比增长率dom-ref
const houseSituationStatisticsDomRef: any = ref(null); // 个人拥有房屋情况统计dom-ref
const buyerPurchaseStatisticsDomRef: any = ref(null); // 购房人购房情况统计dom-ref
const dialogRef: any = ref(null); // chart图放大-domref
// 获取当前年份
const currentYear = new Date().getFullYear();
personHouseData.paramsApi.startTime = currentYear - 2;
personHouseData.paramsApi.endTime = currentYear;

const fullSc = (componentName: any, componentParams: any, moduleName?: any) => {
  personHouseData.magnifyData.dialogVisible = true;
  personHouseData.magnifyData.componentName = componentName;
  personHouseData.magnifyData.componentParams = componentParams;
  personHouseData.magnifyData.moduleName = moduleName;
  switch (componentName) {
    case "barLine": // 个人拥有住房增长趋势、个人拥有住房属性占比及趋势
      personHouseData.magnifyData.props = {
        barLineData: componentParams,
        class: "h220 dialog-h220",
        isExistXAxisTimeType: moduleName === "personHouseAttributeProportionTrend",
      };
      personHouseData.magnifyData.dialogWidth = "60%";
      personHouseData.magnifyData.dialogTop = "15vh";
      break;
    case "piePublic": // 个人拥有住房购房资金来源统计-pie
      personHouseData.magnifyData.props = {
        housingSupplyStatsData: componentParams,
        class: "h190 dialig-h190",
      };
      personHouseData.magnifyData.dialogWidth = "50%";
      personHouseData.magnifyData.dialogTop = "15vh";
      break;
    case "multipleBar": // 新增个人住房贷款同比增长率
      personHouseData.magnifyData.props = {
        barData: componentParams,
        class: "h180 dialog-h180",
      };
      personHouseData.magnifyData.dialogWidth = "60%";
      personHouseData.magnifyData.dialogTop = "15vh";
      break;
    case "singleBar": // 个人拥有房屋情况统计
      personHouseData.magnifyData.props = {
        barData: componentParams,
        class: "h180 dialog-h180",
      };
      personHouseData.magnifyData.dialogWidth = "60%";
      personHouseData.magnifyData.dialogTop = "15vh";
      break;
    case "barLinePublic": // 房屋供应销售统计
      personHouseData.magnifyData.props = {
        housingSupplyStatsData: componentParams,
        class: "h200 dialog-h200",
      };
      personHouseData.magnifyData.dialogWidth = "60%";
      personHouseData.magnifyData.dialogTop = "15vh";
      break;
    case "bubble": // 房屋总量变化分析
      personHouseData.magnifyData.props = {
        housingSupplyStatsData: componentParams,
        class: "h220 dialog-h220",
      };
      personHouseData.magnifyData.dialogWidth = "60%";
      personHouseData.magnifyData.dialogTop = "15vh";
      break;
    case "doubleLine": // 常住人口对个人住房的影响
      personHouseData.magnifyData.props = {
        lineData: componentParams,
        class: "h220 dialog-h220",
      };
      personHouseData.magnifyData.dialogWidth = "60%";
      personHouseData.magnifyData.dialogTop = "15vh";
      break;
  }
};

const personHouseNumberClass = computed(() => {
  const tempLength = personHouseData.houseSituationStatisticsFiltrateList?.length;
  switch (tempLength) {
    case 2:
    case 3:
      return "h210";
    case 4:
      return "h180";
    default:
      return "h240";
  }
});

// 个人住房供应与交易趋势
const carouselChange = (e: number) => {
  personHouseData.carouselInd = e;
};
const personHouseSupply = async (type = "") => {
  // 个人住房供应与交易趋势
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "15%",
    bottom: "5%",
    top: "25%",
  };
  if (["", "left"].includes(type)) {
    // 个人住房供应与交易趋势-左图
    const xAxisTimeType = personHouseData.personHouseSupplyData?.xAxisTimeType ? personHouseData.personHouseSupplyData?.xAxisTimeType : "year";
    let { data } = await getPersonHouseHomeFlowLeft({
      adcode: personHouseData.cityConfig.personHouseSupplyTradeTrendCurrentCity,
      hx:
        personHouseData.personHouseSupplyTradeTrendSelectHouseTypeModel === "全部户型"
          ? ""
          : personHouseData.personHouseSupplyTradeTrendSelectHouseTypeModel,
      mjlx:
        personHouseData.personHouseSupplyTradeTrendSelectAcreageModel === "全部面积"
          ? ""
          : personHouseData.personHouseSupplyTradeTrendSelectAcreageModel,
      dateType: xAxisTimeType === "month" ? 1 : 2,
    });
    let paramsData = barLineParamsData(
      ["批售", "可售", "销量"],
      data.dateList,
      [
        {
          name: "套数",
          type: "1",
        },
      ],
      [
        {
          name: "bar",
          type: "1",
          areaStyleType: "1",
          stack: "1",
        },
        {
          name: "bar",
          type: "1",
          areaStyleType: "1",
          stack: "1",
        },
        {
          name: "bar",
          type: "1",
          areaStyleType: "1",
          stack: "1",
        },
      ],
      [
        data.entryList.map((x: any) => {
          return {
            value: x.ps,
            name: "批售",
            yoyPercentage: x.psTb,
            momPercentage: x.psHb,
          };
        }),
        data.entryList.map((x: any) => {
          return {
            value: x.ks,
            name: "可售",
            yoyPercentage: x.ksTb,
            momPercentage: x.ksHb,
          };
        }),
        data.entryList.map((x: any) => {
          return {
            value: x.xl,
            name: "销量",
            yoyPercentage: x.xlTb,
            momPercentage: x.xlHb,
          };
        }),
      ],
      [
        {
          a: "#55BBEB",
          b: "#074083",
        },
        {
          a: "#24E1E7",
          b: "#086063",
        },
        {
          a: "#F0C44B",
          b: "#E38319",
        },
      ],
      legendStyle,
      gridConfig
    );
    personHouseData.personHouseSupplyData = {
      ...paramsData,
      xAxisTimeType,
      moduleName: "personHouseSupplyTradeTrendLeft",
    };
    if (
      personHouseData.magnifyData.dialogVisible &&
      dialogRef.value &&
      personHouseData.magnifyData.moduleName === "personHouseSupplyTradeTrendLeft"
    ) {
      personHouseData.magnifyData.props.housingSupplyStatsData = personHouseData.personHouseSupplyData;
      nextTick(() => {
        dialogRef.value.updateChart();
      });
    }
  }
  if (["", "right1"].includes(type)) {
    const xAxisTimeType = personHouseData.personHouseSupplyRigthData1?.xAxisTimeType
      ? personHouseData.personHouseSupplyRigthData1?.xAxisTimeType
      : "year";
    let { data: rightData1 } = await getPersonHouseHomeFlowRight({
      adcode: personHouseData.cityConfig.personHouseSupplyTradeTrendCurrentCity,
      hx:
        personHouseData.personHouseSupplyTradeTrendSelectHouseTypeModel === "全部户型"
          ? ""
          : personHouseData.personHouseSupplyTradeTrendSelectHouseTypeModel,
      mjlx:
        personHouseData.personHouseSupplyTradeTrendSelectAcreageModel === "全部面积"
          ? ""
          : personHouseData.personHouseSupplyTradeTrendSelectAcreageModel,
      dateType: xAxisTimeType === "month" ? 1 : 2,
      requestType: 1, // 商品住宅
    });
    let paramsDataRight1 = barLineParamsData(
      ["套数", "面积"],
      rightData1.dateList,
      [
        {
          name: "套数",
          type: "1",
        },
        {
          name: "面积",
          type: "2",
        },
      ],
      [
        {
          name: "bar",
          type: "1",
          areaStyleType: "1",
          stack: "1",
        },
        {
          name: "bar",
          type: "2",
          areaStyleType: "1",
          stack: "1",
        },
      ],
      [
        rightData1.entryList.map((x: any) => {
          return {
            value: x.ts,
            name: "套数",
            yoyPercentage: x.tsTb,
            momPercentage: x.tsHb,
          };
        }),
        rightData1.entryList.map((x: any) => {
          return {
            value: x.ks,
            name: "面积",
            yoyPercentage: x.ksTb,
            momPercentage: x.ksHb,
          };
        }),
      ],
      [
        {
          a: "#24E1E7",
          b: "#086063",
        },
        {
          a: "#E47D7D",
          b: "#CC3E3E",
        },
      ],
      legendStyle,
      gridConfig
    );
    personHouseData.personHouseSupplyRigthData1 = {
      ...paramsDataRight1,
      xAxisTimeType,
      moduleName: "personHouseSupplyTradeTrendRight1",
    };
    if (
      personHouseData.magnifyData.dialogVisible &&
      dialogRef.value &&
      personHouseData.magnifyData.moduleName === "personHouseSupplyTradeTrendRight1"
    ) {
      personHouseData.magnifyData.props.housingSupplyStatsData = personHouseData.personHouseSupplyRigthData1;
      nextTick(() => {
        dialogRef.value.updateChart();
      });
    }
  }
  if (["", "right2"].includes(type)) {
    const xAxisTimeType = personHouseData.personHouseSupplyRigthData2?.xAxisTimeType
      ? personHouseData.personHouseSupplyRigthData2?.xAxisTimeType
      : "year";
    let { data: rightData2 } = await getPersonHouseHomeFlowRight({
      adcode: personHouseData.cityConfig.personHouseSupplyTradeTrendCurrentCity,
      hx:
        personHouseData.personHouseSupplyTradeTrendSelectHouseTypeModel === "全部户型"
          ? ""
          : personHouseData.personHouseSupplyTradeTrendSelectHouseTypeModel,
      mjlx:
        personHouseData.personHouseSupplyTradeTrendSelectAcreageModel === "全部面积"
          ? ""
          : personHouseData.personHouseSupplyTradeTrendSelectAcreageModel,
      dateType: xAxisTimeType === "month" ? 1 : 2,
      requestType: 2, // 二手住宅
    });
    let paramsDataRight2 = barLineParamsData(
      ["套数", "面积"],
      rightData2.dateList,
      [
        {
          name: "套数",
          type: "1",
        },
        {
          name: "面积",
          type: "2",
        },
      ],
      [
        {
          name: "bar",
          type: "1",
          areaStyleType: "1",
          stack: "1",
        },
        {
          name: "bar",
          type: "2",
          areaStyleType: "1",
          stack: "1",
        },
      ],
      [
        rightData2.entryList.map((x: any) => {
          return {
            value: x.ts,
            name: "套数",
            yoyPercentage: x.tsTb,
            momPercentage: x.tsHb,
          };
        }),
        rightData2.entryList.map((x: any) => {
          return {
            value: x.ks,
            name: "面积",
            yoyPercentage: x.ksTb,
            momPercentage: x.ksHb,
          };
        }),
      ],
      [
        {
          a: "#24E1E7",
          b: "#086063",
        },
        {
          a: "#E47D7D",
          b: "#CC3E3E",
        },
      ],
      legendStyle,
      gridConfig
    );
    personHouseData.personHouseSupplyRigthData2 = {
      ...paramsDataRight2,
      xAxisTimeType,
      moduleName: "personHouseSupplyTradeTrendRight2",
    };
    if (
      personHouseData.magnifyData.dialogVisible &&
      dialogRef.value &&
      personHouseData.magnifyData.moduleName === "personHouseSupplyTradeTrendRight2"
    ) {
      personHouseData.magnifyData.props.housingSupplyStatsData = personHouseData.personHouseSupplyRigthData2;
      nextTick(() => {
        dialogRef.value.updateChart();
      });
    }
  }
};
// 购房人购房情况统计
const personHouseBuyerPruchaseStatistics = async () => {
  let { data } = await getPersonHouseLogPurchaseStats({
    adcode: personHouseData.cityConfig.buyerPurchaseStatisticsCurrentCity,
    fwlx: personHouseData.buyerPurchaseStatisticsSelectHouseTypeModel,
    requestType: personHouseData.personHousePropertyStatisticsSelectAgeHomeModel,
    dateType: personHouseData.buyerPurchaseStatisticsData.xAxisTimeType === "month" ? 1 : 2,
  });
  personHouseData.buyerPurchaseStatisticsData.moduleName = "buyerPurchaseStatistics";
  personHouseData.buyerPurchaseStatisticsData.xAxisData = data?.dateList;
  personHouseData.buyerPurchaseStatisticsData.legendData = data?.typeList;
  personHouseData.buyerPurchaseStatisticsData.seriesData = [];
  for (let i = 1; i <= (personHouseData.personHousePropertyStatisticsSelectAgeHomeModel === 1 ? 4 : 2); i++) {
    personHouseData.buyerPurchaseStatisticsData.seriesData.push(
      data?.[`list${i}`]?.map((x: any) => {
        return {
          value: x.sum,
          ...x,
          yoyPercentage: x.tb,
          momPercentage: x.hb,
        };
      })
    );
  }
  if (buyerPurchaseStatisticsDomRef.value) {
    nextTick(() => {
      buyerPurchaseStatisticsDomRef.value.updateChart();
      if (personHouseData.magnifyData.dialogVisible && dialogRef.value && personHouseData.magnifyData.moduleName === "buyerPurchaseStatistics") {
        personHouseData.magnifyData.props.lineData = personHouseData.buyerPurchaseStatisticsData;
        nextTick(() => {
          dialogRef.value.updateChart();
        });
      }
    });
  }
};
// 个人拥有房屋情况统计
const personHouseNumber = async () => {
  let errorList: any = [];
  personHouseData.houseSituationStatisticsFiltrateList.forEach((x: any) => {
    if (x.type && !x.num) {
      errorList.push(personHouseData.houseSituationStatisticsFiltrateSelectTypeList.find((y: any) => y.value === x.type)?.label);
    }
  });
  if (errorList?.length) {
    return ElMessage({
      showClose: true,
      message: `请填写 ${errorList.join(",")} 所对应的值`,
      type: "warning",
    });
  }
  const isExistFiltrateType1 = personHouseData.houseSituationStatisticsFiltrateList?.find((x: any) => x.type === 1);
  const isExistFiltrateType2 = personHouseData.houseSituationStatisticsFiltrateList?.find((x: any) => x.type === 2);
  const isExistFiltrateType3 = personHouseData.houseSituationStatisticsFiltrateList?.find((x: any) => x.type === 3);
  const isExistFiltrateType4 = personHouseData.houseSituationStatisticsFiltrateList?.find((x: any) => x.type === 4);
  let { data } = await getPersonHouseGetIndividualProperty({
    adcode: personHouseData.paramsApi.adcode,
    conditionType: personHouseData.houseSituationStatisticsSwitch ? 1 : 2,
    currentPropertyCount: isExistFiltrateType1 ? Number(isExistFiltrateType1.num) : undefined,
    currentPropertyType: isExistFiltrateType1 ? isExistFiltrateType1.relationalOperatorType : undefined,
    totalPurchaseCount: isExistFiltrateType2 ? Number(isExistFiltrateType2.num) : undefined,
    purchaseType: isExistFiltrateType2 ? isExistFiltrateType2.relationalOperatorType : undefined,
    totalSaleCount: isExistFiltrateType3 ? Number(isExistFiltrateType3.num) : undefined,
    saleType: isExistFiltrateType3 ? isExistFiltrateType3.relationalOperatorType : undefined,
    averagePurchaseCycle: isExistFiltrateType4 ? Number(isExistFiltrateType4.num) : undefined,
    averageType: isExistFiltrateType4 ? isExistFiltrateType4.relationalOperatorType : undefined,
  });
  let paramsData: any = {
    xAxisData: [],
    seriesData: [],
  };
  if (data?.length) {
    data.forEach((x: any) => {
      paramsData.xAxisData.push(x.name);
      paramsData.seriesData.push(x.personNum);
    });
  }
  personHouseData.personHouseNumberData = paramsData;
  if (houseSituationStatisticsDomRef.value) {
    nextTick(() => {
      houseSituationStatisticsDomRef.value.updateChart();
    });
  }
};
// 个人住房面积走势分析
const personHouseArea = async () => {
  let { data } = await getPersonHouseArea(personHouseData.paramsApi);
  let legendStyle = {
    show: true,
    icon: "",
    right: 9,
    top: 5,
    itemWidth: 30,
    itemHeight: 14,
    itemGap: 14,
  };
  let gridConfig = {
    left: "4%",
    right: 9,
    bottom: "5%",
    top: "35%",
  };
  let paramsData = barLineParamsData(
    ["人口增长率", "家庭增长率", "个人拥有住房面积"],
    data.years,
    [
      {
        name: "个人拥有住房面积",
        type: "1",
      },
      {
        name: "同比上年(%)",
        type: "2",
      },
    ],
    [
      {
        name: "line",
        type: "2",
        areaStyleType: "2",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "2",
        stack: "1",
      },
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
    ],
    [data.personYOYList, data.familyYOYList, data.nowAreaList],
    [
      {
        a: "rgba(229, 81, 81, 1)",
        b: "rgba(229, 81, 81, 0)",
      },
      {
        a: "rgba(37, 174, 238, 1)",
        b: "rgba(37, 174, 238, 0)",
      },
      {
        a: "rgba(228, 135, 29, 1)",
        b: "rgba(228, 135, 29, 0)",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.personHouseAreaData = paramsData;
};
// 个人拥有住房购房资金来源及贷款趋势
const personHouseFundStatistics = async (type: string = "") => {
  const xAxisTimeType = personHouseData.personHouseFundStatisticsData?.xAxisTimeType
    ? personHouseData.personHouseFundStatisticsData?.xAxisTimeType
    : "year";
  let { data: leftChartData } = await getPersonHouseFundLoanTrend({
    adcode: personHouseData.cityConfig.personHouseCapitalSourceLoanTrendCurrentCity,
    startTime: personHouseData.personHouseCapitalSourceCurrentMonth,
  });
  let { data: rightChartData } = await getPersonHouseFundLoanTrendRight({
    adcode: personHouseData.cityConfig.personHouseCapitalSourceLoanTrendCurrentCity,
    dateType: xAxisTimeType === "month" ? 1 : 2,
  });
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 8,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "7%",
    top: "25%",
  };
  let leftEntity = {
    outCircle: leftChartData.outCircle?.map((x: any) => {
      return {
        name: x.type,
        value: x.num,
        ...x,
      };
    }),
    innerCircle: leftChartData.innerCircle?.map((x: any) => {
      return {
        name: x.type,
        value: x.num,
        ...x,
      };
    }),
  };
  let rightEntity: any = {
    xAxisData: rightChartData?.dateList,
    barData: [[], []],
    moduleName: "personHouseLoanYoyGrowthRate",
  };
  rightEntity.xAxisData?.forEach((x: any, i: number) => {
    rightEntity.barData[0].push({
      value: rightChartData?.grdkzeList?.[i]?.je,
      ...rightChartData?.grdkzeList?.[i],
    });
    rightEntity.barData[1].push({
      value: rightChartData?.sydkzeList?.[i]?.je,
      ...rightChartData?.sydkzeList?.[i],
    });
  });
  personHouseData.personHouseFundStatisticsData = {
    rightEntity,
    leftEntity: !type || type === "leftChart" ? leftEntity : personHouseData.personHouseFundStatisticsData.leftEntity,
    xAxisTimeType,
  };
  if ((!type || type === "leftChart") && buyHouseCapitalSourceStatisticsDomRef.value) {
    nextTick(() => {
      buyHouseCapitalSourceStatisticsDomRef.value.updateChart();
    });
  }
  if ((!type || type === "rightChart") && loanYoyGrowthRateDomRef.value) {
    nextTick(() => {
      loanYoyGrowthRateDomRef.value.updateChart();
    });
    if (personHouseData.magnifyData.dialogVisible && dialogRef.value && personHouseData.magnifyData.moduleName === "personHouseLoanYoyGrowthRate") {
      personHouseData.magnifyData.props.barData = personHouseData.personHouseFundStatisticsData;
      nextTick(() => {
        dialogRef.value.updateChart();
      });
    }
  }
};
// 个人拥有住房属性占比及趋势
const zbChange = (e: number) => {
  personHouseData.zbInd = e;
};
const personHousePropertyStatistics = async () => {
  // 个人拥有住房属性占比及趋势
  const xAxisTimeType = personHouseData.personHousePropertyStatisticsData?.xAxisTimeType
    ? personHouseData.personHousePropertyStatisticsData?.xAxisTimeType
    : "year";
  let { data } = await getPersonHouseGetHousingTrend({
    adcode: personHouseData.cityConfig.personHouseAttributeProportionTrendCurrentCity,
    // adcode: 210100,
    dateType: xAxisTimeType === "month" ? 1 : 2,
    hx: personHouseData.personHousePropertyStatisticsSelectHouseTypeModel,
    mjlx: personHouseData.personHousePropertyStatisticsSelectAcreageModel,
    fwlx: personHouseData.personHousePropertyStatisticsSelectTypeModel,
  });
  let paramsData: any = {
    moduleName: "personHouseAttributeProportionTrend",
    xAxisTimeType,
    xAxisData: [],
    legendData: [],
    barData: [],
    lineData: xAxisTimeType === "month" ? [[], []] : [[]],
  };
  if (data && data?.length) {
    data.forEach((x: any, i: number) => {
      paramsData.xAxisData.push(x.date);
      if (i === 0) {
        paramsData.legendData = x.typeList.map((y: any) => y.type);
      }
      x.typeList?.forEach((y: any, yI: number) => {
        paramsData.barData.push([]);
        paramsData.barData[yI].push({
          value: y.sum,
          ...x,
        });
      });
      paramsData.lineData[0].push(x.tb);
      if (xAxisTimeType === "month") {
        paramsData.lineData[1].push(x.hb);
      }
    });
  }
  paramsData.legendData.push("同比");
  if (paramsData.xAxisTimeType === "month") {
    paramsData.legendData.push("环比");
  }
  personHouseData.personHousePropertyStatisticsData = paramsData;
  if (personHousePropertyStatisticsDomRef.value) {
    nextTick(() => {
      personHousePropertyStatisticsDomRef.value.updateChart();
    });
    if (
      personHouseData.magnifyData.dialogVisible &&
      dialogRef.value &&
      personHouseData.magnifyData.moduleName === "personHouseAttributeProportionTrend"
    ) {
      personHouseData.magnifyData.props.barLineData = paramsData;
      nextTick(() => {
        dialogRef.value.updateChart();
      });
    }
  }
};

const personHouseStatistics = async () => {
  // 个人拥有住房增长趋势
  let { data } = await getPersonHouseTrackHousingGrowth({
    adcode: personHouseData.paramsApi.adcode,
    requestType: personHouseData.personHouseStatisticsSelectModel,
  });
  let paramsData = {
    moduleName: "personHouseGrowthTrend",
    xAxisData: data?.dateList,
    legendData: data?.mapList?.[0]?.entryList?.map((x: any) => x.hx).concat(["同比"]),
    barData: data?.mapList?.[0]?.entryList
      ?.map((x: any) => x.hx)
      ?.map((y: any, yIndex: number) => {
        return data?.mapList?.map((z: any) => {
          return {
            value: z?.entryList?.[yIndex]?.num,
            name: z?.entryList?.[yIndex]?.hx,
            ...z,
          };
        });
      }),
    lineData: [
      data?.mapList?.map((x: any) => {
        return x.tb;
      }),
    ],
  };
  personHouseData.personHouseStatisticsData = paramsData;
  personHouseData.personHouseStatisticsDataTopInfo = data.mapList?.[data?.mapList?.length - 1];
  if (personHouseStatisticsDomRef.value) {
    nextTick(() => {
      personHouseStatisticsDomRef.value.updateChart();
    });
  }
};
// 个人拥有住房增长趋势-个人拥有住房数量和同比增长率统计
const personHouseTypeStatistics = async () => {
  let { data } = await getPersonHouseTypeStatistics(personHouseData.paramsApi);
  let paramsData = {
    personHouseTypeDTOSArea: data.personHouseTypeDTOSArea,
    personHouseTypeDTOSType: data.personHouseTypeDTOSType,
    color: ["#29BEFF", "#A2DC00", "#FFC400", "#FF7F5C", "#CA99FC"],
  };
  personHouseData.personHouseTypeStatisticsData = paramsData;
};
// 地图
const personHouseMiddle = async () => {
  let { data } = await getPersonHouseMiddle({
    adcode: personHouseData.paramsApi.adcode,
    dateType: 3,
    endTime: personHouseData.regionRankingCurrentYear,
  });
  // 顶部地图
  let inventoryRegionDTOS = data.regions.inventoryRegionDTOS.map((item: any) => ({
    name: item.regionName,
    value: item.number,
    code: item.regionCode,
  }));
  let priceRegionDTOS = data.regions.priceRegionDTOS.map((item: any) => ({ name: item.regionName, value: item.number, code: item.regionCode }));
  let salesRegionDTOS = data.regions.salesRegionDTOS.map((item: any) => ({ name: item.regionName, value: item.number, code: item.regionCode }));
  let supplyRegionDTOS = data.regions.supplyRegionDTOS.map((item: any) => ({ name: item.regionName, value: item.number, code: item.regionCode }));
  let seriesData = [supplyRegionDTOS, inventoryRegionDTOS, salesRegionDTOS, priceRegionDTOS];
  let paramsData = {
    regions: seriesData,
  };
  // 中间列表
  let inventory = data.list.inventory;
  let price = data.list.price;
  let sales = data.list.sales;
  let supply = data.list.supply;
  let seriesListData = [supply, inventory, sales, price];
  let listData = {
    list: seriesListData,
  };
  personHouseData.personHouseMiddleData = paramsData;
  personHouseData.personHouseMiddleListData = listData;
  getRegionList();
};

const getRegionList = (ind: number = 0) => {
  personHouseData.regionRankingList = personHouseData.personHouseMiddleListData.list[ind];
  const totalNum = personHouseData.regionRankingList.reduce((accumulator: any, currentValue: any) => accumulator + Number(currentValue.num), 0);
  personHouseData.regionRankingList = personHouseData.regionRankingList?.map((x: any) => {
    return {
      label: x.regionName,
      value: Number(x.num),
      total: totalNum,
      yoyPercentaage: x.numtb,
    };
  });
  /*personHouseData.regionRankingList = [
    {
      label: '沈阳',
      value: 800,
      total: 5000,
    },
    {
      label: '大连',
      value: 600,
      total: 5000,
    },
    {
      label: '鞍山',
      value: 500,
      total: 5000,
    },
    {
      label: '抚顺',
      value: 200,
      total: 5000,
    },
    {
      label: '本溪',
      value: 400,
      total: 5000,
    },
    {
      label: '朝阳',
      value: 200,
      total: 5000,
    },
    {
      label: '葫芦岛',
      value: 300,
      total: 5000,
    },
  ]*/
};

// 点击地图选项卡
const mapLableFun = (ind: any) => {
  personHouseData.mapInd = ind;
  getRegionList(ind);
};
// 子组件触发当前选中项
const mapNameChange = (data: any) => {
  if (personHouseData.cityName == data.cityName) {
    (personHouseData.cityName = ""), (personHouseData.paramsApi.adcode = "210000");
  } else {
    (personHouseData.cityName = data.cityName), (personHouseData.paramsApi.adcode = data.cityCode);
  }
  personHouseData.cityConfig.personHouseAttributeProportionTrendCurrentCity = data.cityCode;
  personHouseData.cityConfig.personHouseCapitalSourceLoanTrendCurrentCity = data.cityCode;
  personHouseData.cityConfig.personHouseSupplyTradeTrendCurrentCity = data.cityCode;
  personHouseData.cityConfig.totalHouseChangeAnalysisCurrentCity = data.cityCode;
  personHouseData.cityConfig.buyerPurchaseStatisticsCurrentCity = data.cityCode;
  allFun();
  personHouseNumber();
};
// 商品房总量变化分析
const personHouseCommodity = async () => {
  let { data } = await getPersonHouseCommodity(personHouseData.paramsApi);
  let paramsData = data;
  personHouseData.personHouseCommodityData = paramsData;
};

const changeXAxisTimeType = (event: any, type: string) => {
  // 更改X轴年月
  switch (type) {
    /*    case 'personHouseGrowthTrend': // 个人拥有住房增长趋势
      personHouseData.personHouseStatisticsData.xAxisTimeType = event
      personHouseStatistics() // 个人拥有住房增长趋势
      break;*/
    case "personHouseAttributeProportionTrend": // 个人拥有住房属性占比及趋势
      personHouseData.personHousePropertyStatisticsData.xAxisTimeType = event;
      personHousePropertyStatistics();
      break;
    case "personHouseLoanYoyGrowthRate": // 新增个人住房贷款同比增长率
      personHouseData.personHouseFundStatisticsData.xAxisTimeType = event;
      personHouseFundStatistics("rightChart");
      break;
    case "personHouseSupplyTradeTrendLeft": // 个人住房供应与交易趋势-房屋供应销售统计
      personHouseData.personHouseSupplyData.xAxisTimeType = event;
      personHouseSupply("left");
      break;
    case "personHouseSupplyTradeTrendRight1": // 个人住房供应与交易趋势-房屋交易趋势-right1
      personHouseData.personHouseSupplyRigthData1.xAxisTimeType = event;
      personHouseSupply("right1");
      break;
    case "personHouseSupplyTradeTrendRight2": // 个人住房供应与交易趋势-房屋交易趋势-right2
      personHouseData.personHouseSupplyRigthData2.xAxisTimeType = event;
      personHouseSupply("right2");
      break;
    case "buyerPurchaseStatistics": // 购房人购房情况统计
      personHouseData.buyerPurchaseStatisticsData.xAxisTimeType = event;
      personHouseBuyerPruchaseStatistics();
      break;
  }
};

const changePersonHouseGrowthTrendSelect = () => {
  // 个人拥有住房增长趋势-select-func
  personHouseStatistics(); // 个人拥有住房增长趋势
};

const changePersonHouseAttributeProportionTrendSelect = () => {
  // 个人拥有住房属性占比及趋势-select-func
  personHousePropertyStatistics();
};

const changePersonHouseSupplyTradeTrendSelect = () => {
  // 个人住房供应与交易趋势-select-func
  personHouseSupply();
};

const changeBuyerPurchaseStatisticsSelectSelect = () => {
  // 购房人购房情况统计-select-func
  personHouseBuyerPruchaseStatistics();
};

const changeCity = (cityCode: number, type: string) => {
  // 模块切换城市
  switch (type) {
    case "personHouseAttributeProportionTrend": // 个人拥有住房属性占比及趋势
      personHouseData.cityConfig.personHouseAttributeProportionTrendCurrentCity = cityCode;
      personHousePropertyStatistics();
      break;
    case "personHouseCapitalSourceLoanTrend": // 个人拥有住房属购房资金来源及贷款趋势
      personHouseData.cityConfig.personHouseCapitalSourceLoanTrendCurrentCity = cityCode;
      personHouseFundStatistics();
      break;
    case "personHouseSupplyTradeTrend": // 个人住房供应与交易趋势
      personHouseData.cityConfig.personHouseSupplyTradeTrendCurrentCity = cityCode;
      personHouseSupply();
      break;
    case "totalHouseChangeAnalysis": // 房屋总量变化分析
      personHouseData.cityConfig.totalHouseChangeAnalysisCurrentCity = cityCode;
      personHouseCommodity();
      break;
    case "buyerPurchaseStatistics": // 购房人购房情况统计
      personHouseData.cityConfig.buyerPurchaseStatisticsCurrentCity = cityCode;
      personHouseBuyerPruchaseStatistics();
      break;
  }
};

const changeYearTime = (event: any, type: string) => {
  // change-年份筛选
  switch (type) {
    case "regionRanking": // 各地区排名
      personHouseMiddle();
      break;
  }
};

const houseSituationStatisticsAddFiltrate = () => {
  // 房屋情况统计-添加筛选
  personHouseData.houseSituationStatisticsFiltrateList.push({
    type: "",
    relationalOperatorType: 1,
    num: null,
  });
  if (houseSituationStatisticsDomRef.value) {
    nextTick(() => {
      houseSituationStatisticsDomRef.value.updateChart();
    });
  }
};

const houseSituationStatisticsInitChart = () => {
  // 房屋情况统计-生成图表
  personHouseNumber(); // 个人拥有房屋情况统计
};

const deleteHouseSituationStatisticsFiltrate = (item: any, index: number) => {
  // 个人拥有房屋情况统计-delete-func
  personHouseData.houseSituationStatisticsFiltrateList = personHouseData.houseSituationStatisticsFiltrateList?.filter(
    (x: any, i: number) => i !== index
  );
  publicHandleSelectListDisabledStatus();
  if (houseSituationStatisticsDomRef.value) {
    nextTick(() => {
      houseSituationStatisticsDomRef.value.updateChart();
    });
  }
};

const houseSituationStatisticsFiltrateSelectTypeChange = () => {
  // 个人拥有房屋情况统计-房屋情况type-change
  publicHandleSelectListDisabledStatus();
};

const publicHandleSelectListDisabledStatus = () => {
  // 公共处理个人拥有房屋情况统计-房屋情况type-禁用逻辑
  const isSelectedList = personHouseData.houseSituationStatisticsFiltrateList?.map((x: any) => x.type) || [];
  if (isSelectedList?.length) {
    personHouseData.houseSituationStatisticsFiltrateSelectTypeList.forEach((x: any) => {
      x.disabled = isSelectedList.includes(x.value);
    });
  }
};

const handleInput = (value: any, res: any) => {
  // 使用正则表达式匹配正整数
  const regex = /^[1-9]\d*$/;
  // 如果输入的值不是正整数，则将其设置为上一个有效的值
  if (!regex.test(value)) {
    res.num = res.num.substring(0, res.num.length - 1);
  }
};

const dialogEmit = ({ type, value }: any) => {
  // dialog的v-on
  personHouseData.magnifyData.componentParams.xAxisTimeType = value;
  switch (type) {
    case "personHouseAttributeProportionTrend": // dialog-个人拥有住房属性占比及趋势-chart图
      personHouseData.personHousePropertyStatisticsData.xAxisTimeType = value;
      personHousePropertyStatistics(); // 个人拥有住房属性占比及趋势
      break;
    case "personHouseLoanYoyGrowthRate": // dialog-新增个人住房贷款同比增长率-chart图
      personHouseData.personHouseFundStatisticsData.xAxisTimeType = value;
      personHouseFundStatistics("rightChart"); // 新增个人住房贷款同比增长率
      break;
    case "personHouseSupplyTradeTrendLeft": // dialog-房屋供应销售统计-chart图
      personHouseData.personHouseSupplyData.xAxisTimeType = value;
      personHouseSupply("left");
      break;
    case "personHouseSupplyTradeTrendRight1": // dialog-房屋交易趋势-商品住宅-chart图1
      personHouseData.personHouseSupplyRigthData1.xAxisTimeType = value;
      personHouseSupply("right1");
      break;
    case "personHouseSupplyTradeTrendRight2": // dialog-房屋交易趋势-二手房住宅-chart图
      personHouseData.personHouseSupplyRigthData2.xAxisTimeType = value;
      personHouseSupply("right2");
      break;
    case "buyerPurchaseStatistics": // dialog-常住人口对个人住房的影响-chart图
      personHouseData.buyerPurchaseStatisticsData.xAxisTimeType = value;
      personHouseBuyerPruchaseStatistics();
      break;
  }
};

// 查询
const allFun = () => {
  personHouseMiddle();
  personHouseCommodity();
  personHouseSupply();
  personHouseStatistics(); // 个人拥有住房增长趋势
  personHouseTypeStatistics();
  personHouseBuyerPruchaseStatistics(); // 购房人购房情况统计
  personHouseFundStatistics();
  personHousePropertyStatistics();
  personHouseArea();
};

/*const getYearRange = (res: any) => {
  personHouseData.paramsApi.startTime = res[0];
  personHouseData.paramsApi.endTime = res[1];
  allFun();
};*/

onMounted(() => {
  const date = new Date();
  const currentYear = date.getFullYear();
  const currentYearMonth = `${currentYear}-${date.getMonth() + 1 > 9 ? "" : 0}${date.getMonth() + 1}`;
  personHouseData.personHouseCapitalSourceCurrentMonth = currentYearMonth;
  personHouseData.regionRankingCurrentYear = currentYear - 1 + "";
  // 异步函数
  allFun();
});
</script>

<style scoped lang="less">
.h224 {
  height: 224px;
}
.h183 {
  height: 183px;
}
/*.h190 {
  height: 190px;
}*/
.h227 {
  height: 227px;
}
.h131 {
  height: 131px;
}
/*.h220 {
  height: 220px;
}*/
.h256 {
  height: 256px;
}
::v-deep .el-dialog {
  background-color: rgba(8, 64, 132, 0.9);
}
.personInfor-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/personInfor/bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: auto;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0px;
  }
  .personInfor-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 26px;
    background: url("@/assets/img/personInfor/header-bg.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .personInfor-content {
    width: 100vw;
    height: calc(100vh - 111px);
    display: grid;
    grid-gap: 17px 31px;
    grid-template: repeat(3, 302px) / repeat(3, 587px);
    place-content: start center;
    .personInfor-gird {
      color: #fff;
      background: rgba(9, 70, 145, 0.15);
      .personInfor-gird-title {
        width: 100%;
        height: 46px;
      }
      .add-trend {
        display: flex;
        padding: 11px 11px 11px 6px;
        box-sizing: border-box;
        .add-trend-l,
        .add-trend-r {
          width: 50%;
        }
      }
    }

    .personInfor-gird-four {
      grid-column: 2 / 3;
      grid-row: 2 / 4;
      background: rgba(9, 70, 145, 0);
      .personInfor-four-top {
        height: 280px;
        background: rgba(9, 70, 145, 0.15);
        .top-tab {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px 10px 0;
        }
        .main-content {
          padding: 5px 10px 0;
          .bar-index {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
          }
          .bar-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: white;
          }
          &-header {
            font-size: 15px;
            display: flex;
            align-items: center;
            margin: 5px 0;
            .bar-index {
              width: 50px;
            }
            .bar-label {
              width: 80px;
            }
            .bar {
              width: 60%;
            }
            .bar-rate {
              margin-left: 10px;
            }
          }
          &-table {
            height: 200px;
            overflow-y: auto;
            &-item {
              display: flex;
              align-items: center;
              cursor: pointer;
              font-size: 16px;

              .bar-index {
                width: 50px;
              }

              .bar-label {
                width: 60px;
              }

              .bar {
                display: flex;
                align-items: center;
                position: relative;
                overflow: hidden;
                width: 60%;
                height: 20px;
                margin-left: 20px;
                background-color: #23374a;

                .bar-item {
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                  background: linear-gradient(90deg, #27f8fc 0%, #0271bc 100%);
                  font-size: 12px;
                  line-height: 20px;
                  color: white;
                  font-weight: bold;
                  display: inline-block;
                  text-align: right;
                  padding-right: 10px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }

              .bar-rate {
                flex: 1;
                margin-left: 30px;
              }
            }

            &-item.is-active {
              color: #27f6f9;
            }

            &-item:not(:last-child) {
              margin-bottom: 20px;
            }
          }
        }
      }
      .personInfor-four-center {
        height: 227px;
        margin-top: 15px;
        margin-bottom: 15px;
        background: rgba(9, 70, 145, 0.15);
      }
      .personInfor-four-bottom {
        height: 327px;
        background: rgba(9, 70, 145, 0.15);
        position: relative;
        margin-top: 15px;
        .personInfor-four-bottom-title {
          display: flex;
          align-items: center;
          height: auto;
          margin-top: 10px;
          &-switch {
            transform: rotate(90deg);
            /deep/ .el-switch {
              &__core {
                width: 34px;
              }
            }
            /deep/ .is-text {
              transform: rotate(-90deg);
            }
          }
          &-filtrate {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            margin-right: 10px;
            > div {
              width: 50%;
              display: flex;
              align-items: center;
              box-sizing: border-box;
              .type {
                width: 35%;
              }
              .relational-operator-type {
                width: 22%;
              }
              .num {
                width: 30%;
              }
              .relational-operator-type,
              .num {
                margin-left: 5px;
              }
            }
            > div:nth-of-type(3),
            > div:nth-of-type(4),
            > div:nth-of-type(5) {
              margin-top: 5px;
            }
            .delete-btn {
              margin-left: 5px;
            }
            .btns {
              display: flex;
              align-items: center;
              font-size: 12px;
              div {
                background: linear-gradient(60deg, #0e5fff 0%, #00ffff 100%);
                padding: 5px;
                border-radius: 5px;
                cursor: pointer;
              }
              div:first-child {
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
}

.small-title {
  font-size: 14px;
  color: #c5fffd;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  .small-title-logo {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}

.add-trend-l-content-top {
  font-size: 12px;
  color: #ffffff;
  line-height: 17px;
  letter-spacing: 1.2px;
  div {
    display: flex;
    align-items: center;
    span {
      font-size: 14px;
      background: linear-gradient(180deg, #ffffff, #e4871d);
      -webkit-background-clip: text; /* 添加这一行用于兼容性 */
      -webkit-text-fill-color: transparent; /* 添加这一行用于兼容性 */
    }
  }
}

::v-deep .custom-carousel {
  width: 100%;
  height: 227px;
}

.map-lable {
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 1.2px;
  div {
    width: 81px;
    height: 30px;
    margin-top: 6px;
    text-align: center;
    background: url("@/assets/img/personInfor/map-lable.png");
    background-size: 100% 100%;
    cursor: pointer;
    display: inline-block;
  }
  .active {
    background: url("@/assets/img/personInfor/map-lable-active.png");
    background-size: 100% 100%;
  }
}

.time-list-box {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  height: 21px;
}

.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}

.person-house-growth-trend {
  // 个人拥有住房增长趋势
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  .add-trend-l-content-top {
    font-size: 14px;
  }
  .person-house-growth-trend-select {
    position: absolute;
    width: 80px;
    left: 10px;
    top: 32px;
    z-index: 1;
  }
}

.person-house-supply-trade-trend {
  // 个人住房供应与交易趋势
  display: flex;
  flex-direction: column;
  width: 100%;
  &-select {
    display: flex;
    align-items: center;
    > div:not(:first-child) {
      margin-left: 10px;
    }
    &-type {
      width: 90px;
    }
  }
  &-chart {
    display: flex;
  }
}

.person-house-attribute-proportion-trend {
  // 个人拥有住房属性占比及趋势
  display: flex;
  flex-direction: column;
  width: 100%;
  &-select {
    display: flex;
    align-items: center;
    > div:not(:first-child) {
      margin-left: 10px;
    }
    &-type {
      width: 90px;
    }
  }
}

.buyer-purchase-statistics {
  // 常住人口对个人住房的影响
  display: flex;
  flex-direction: column;
  width: 100%;
  &-select {
    display: flex;
    align-items: center;
    margin-top: 10px;
    > div:not(:first-child) {
      margin-left: 10px;
    }
    &-type {
      width: 90px;
    }
  }
}

.capital-source-loan-trend {
  // 购房资金来源及贷款趋势
  display: flex;
  flex-direction: column;
  &-content {
    display: flex;
    margin-top: 5px;
    .add-trend-l {
      position: relative;
      /deep/ .month-picker {
        position: absolute;
        left: 0;
        top: 25px;
      }
    }
  }
}

.total-house-change-analysis-city-filtrate {
  margin-top: 10px;
}

/deep/ .el-select__wrapper {
  background: #204485;
  .el-select__selected-item {
    color: white;
  }
}
.custom-select-option {
  color: #ffffff;
  background: #1c5bcc;
}
.custom-select-option.is-selected {
  color: #00e0ff;
}
.custom-select-option:hover {
  background: #368cf2;
}
/deep/ .month-picker {
  width: 85px;
  height: 20px;
  .el-input__wrapper {
    background: #204485;
    .el-input__inner {
      color: white;
    }
  }
}
:deep(.el-date-editor) {
  opacity: 1;
}
/deep/ .el-input__wrapper {
  background: #204485;
  .el-input__inner {
    color: white;
  }
  .el-range-input,
  .el-range-separator {
    color: white;
  }
}
/deep/ .date-picker-model {
  width: 90px;
  height: 24px;
}
</style>
<style lang="less">
.region-ranking-tooltip .el-popper__arrow:before {
  background-color: #1c5bcc !important;
}
</style>
